<template>
  <div class="app-container">
    <div style="margin: 0 auto">
      <el-row :gutter="10">
        <el-col :span="12" :offset="6">
          <div style="text-align: center;margin-bottom: 30px;font-size: 18px">
            区域信息{{ createStatus ? '新增' : '更新' }}
          </div>
          <el-form :model="regionForm" ref="regionForm" :rules="regionFormRules" label-width="100px">
            <el-form-item label="区域名称" prop="name" required>
              <el-input type="text" v-model="regionForm.name" placeholder="请输入区域名称" clearable></el-input>
            </el-form-item>
            <el-form-item label="所属企业" prop="enterpriseId" v-if="enterPriseHidden">
              <el-select v-model="regionForm.enterpriseId" filterable placeholder="请选择主体" style="width: 100%">
                <el-option v-for="(item,index) in enterpriseList" :key="index" :value="item.ucId"
                           :label="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="所属建筑" prop="buildId" required>
              <el-select v-model="regionForm.buildId" filterable placeholder="请选择所属建筑" style="width: 100%">
                <el-option v-for="(item,index) in buildList" :key="index" :value="item.ucId"
                           :label="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="楼层" prop="floor">
              <el-input type="number" v-model="regionForm.floor" placeholder="请输入楼层" clearable></el-input>
            </el-form-item>
            <el-form-item label="区域面积" prop="area">
              <el-input type="text" v-model="regionForm.area" placeholder="请输入区域面积" clearable>
                <template slot="append">㎡</template>
              </el-input>
            </el-form-item>
            <el-form-item label="设备数量" prop="equNumber">
              <el-input type="text" disabled v-model="regionForm.equNumber" placeholder="请输入设备个数" clearable>
                <template slot="append">个</template>
              </el-input>
            </el-form-item>
            <el-form-item label="详细位置" prop="address">
              <el-input type="text" v-model="regionForm.address" placeholder="请输入设备详细位置" clearable></el-input>
            </el-form-item>
            <el-form-item label="联动人员" prop="regionLeader">
              <el-select v-model="regionForm.regionLeader" multiple filterable placeholder="请选择联动人员" style="width: 100%">
                <el-option
                    v-for="item in userList"
                    :key="item.ucId"
                    :label="item.name"
                    :value="item.ucId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="联动区域" prop="periphery">
              <el-select v-model="regionForm.periphery" filterable multiple placeholder="请选择联动区域" style="width: 100%">
                <el-option
                    v-for="item in regionList"
                    :key="item.ucId"
                    :label="item.name"
                    :value="item.ucId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div style="text-align: center" class="dialog-footer">
            <el-button @click="cancelRegion">取 消</el-button>
            <el-button :loading="addLoading" v-if="createStatus" type="primary" @click="createRegion">创 建</el-button>
            <el-button :loading="addLoading" v-else type="primary" @click="updateRegion">修 改</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {getBuildList, getInRegionVo, getInUserList, getRegionList} from "@/api/enterprise";
import {
  addInRegion,
  updateInRegion
} from "../../../api/enterprise";
import {getInEnterpriseDominantList} from "../../../api/enterpriseDominant";

export default {
  name: "edit",
  computed: {
    createStatus() {
      return this.$route.query.ucId == undefined
    },
    enterPriseHidden() {
      let roleCode = this.$store.getters.roleCode;
      return roleCode == "ADMIN" || roleCode == "XT-ADMIN" || roleCode == "ZD-ADMIN" || roleCode == "DD-ADMIN" || roleCode == "JW-ADMIN"
    },
  },
  data() {
    return {
      regionForm: {
        name: '',
        buildId: '',
        floor: 1,
        equNumber: 0,
        address: '',
        regionLeader:[],
        periphery: []
      },
      regionFormRules: {
        name: [{required: true, message: '请输入区域名称', trigger: ["blur"]}],
        buildId: [{required: true, message: '请选择所属建筑', trigger: ["change", "blur"]}],
        floor: [{required: true, message: '请输入所在楼层', trigger: ["change", "blur"]}],
        address: [{required: true, message: '请填写详细位置', trigger: ["blur"]}],
        enterpriseId: [{required: true, message: '请填写详细位置', trigger: ["blur"]}],
        // regionLeader:[{required: true, message: '请选择联动人员', trigger: ["blur"]}]
      },
      buildList: [],
      regionList: [],
      addLoading: false,
      enterpriseList: [],
      //用户数据
      userList:[]
    }
  },
  created() {
    this.getInEnterpriseDominantList()
    this.getBuildList()
    this.getRegionList()
    this.getInUserList()
    if (!this.createStatus) {
      this.getRegionInfo()
    }
  },
  methods: {
    getInUserList(val){
      getInUserList({deleted:false,flagId:val}).then(res=>{
        this.userList = res.data
      }).catch(error=>{
        alert("获取用户列表失败")
      })
    },
    getRegionInfo() {
      getInRegionVo({ucId: this.$route.query.ucId}).then(res => {
        this.regionForm = res.data
        this.regionForm.regionLeader = JSON.parse(res.data.regionLeader)
        this.regionForm.periphery = JSON.parse(res.data.periphery)
      }).catch(error => {
      })
    },
    getBuildList() {
      getBuildList({}).then(res => {
        if(res.data){
          this.buildList = res.data
        }
      })
    },
    getInEnterpriseDominantList() {
      getInEnterpriseDominantList({deleted: false}).then(res => {
        if(res.data){
          this.enterpriseList = res.data
        }
      })
    },
    getRegionList() {
      getRegionList({}).then(res => {
        if(res.data){
          this.regionList = res.data
        }
      })
    },
    cancelRegion() {
      window.history.back()
    },
    createRegion() {
      this.addLoading = true
      this.$refs['regionForm'].validate(valid => {
        if (valid) {
          let obj = Object.assign({}, this.regionForm)
          obj.regionLeader = JSON.stringify(obj.regionLeader)
          obj.periphery = JSON.stringify(obj.periphery)
          addInRegion(obj).then(res => {
            this.addLoading = false
            this.$notify.success({
              title: '成功',
              message: "添加区域信息成功"
            })
            this.cancelRegion()
          }).catch(res => {
            this.addLoading = false
            this.$notify.error({
              title: '失败',
              message: res.msg
            })
          })
        } else {
          this.addLoading = false
          console.log("表单验证不通过")
        }
      })
    },
    updateRegion() {
      this.addLoading = true
      this.$refs['regionForm'].validate(valid => {
        if (valid) {
          let obj = Object.assign({}, this.regionForm)
          obj.regionLeader = JSON.stringify(obj.regionLeader)
          obj.periphery = JSON.stringify(obj.periphery)
          updateInRegion(obj).then(res => {
            this.addLoading = false
            this.$notify.success({
              title: '成功',
              message: "更新区域信息成功"
            })
            this.cancelRegion()
          }).catch(res => {
            this.addLoading = false
            this.$notify.error({
              title: '失败',
              message: res.msg
            })
          })
        } else {
          this.addLoading = false
          console.log("表单验证不通过")
        }
      })
    },
  }
}
</script>

<style scoped>

</style>
